<template>
    <div class="container">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
            <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            <el-button @click="registerForm()">注册</el-button>
        </el-form-item>
    </el-form>
           
    </div>
</template>
  
<script  setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { reactive, ref } from 'vue'
import { computed } from "vue";

let router = useRouter()

const store = useStore();
const ruleFormRef = ref()

const validateUsername = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the username'))
    } else {
        if (ruleForm.username !== '') {
            if (!ruleFormRef.value) return
        }
        callback()
    }
}
const validateNickname = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the nickname'))
    } else {
        if (ruleForm.nickname !== '') {
            if (!ruleFormRef.value) return
        }
        callback()
    }
}
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the password'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
        }
        callback()
    }
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('Please input the password again'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    nickname: '',
    pass: '',
    checkPass: '',
})

const rules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    nickname: [{ validator: validateNickname, trigger: 'blur' }],
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})
// const register = ref(true)
let islogin = computed(() => {
      return store.state.user.userinfo.islogin;
    });
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        store.dispatch('user/login',ruleForm)
        if (islogin) { router.push('/') }
        else {
            console.log('error submit!')
            return false
        }
    })
}

const registerForm = () => {
    router.push('/register')
}
</script>
<style lang="less" scoped>
.container {
    background: url("../assets/images/banner.png");
    background-size: cover;
}

.el-form {
    width: 600px;
    padding-left: 320px;
    padding-top: 200px;
    padding-bottom: 200px;
}

.el-input {
    height: 40px;
    --el-input-border-color: #27aeaa;
}

.el-form-item {
    margin-top: 40px;
}

.el-form-item__content {
    width: 200px;
}

.el-button {
    width: 220px;
    height: 50px;
}
</style>